<template>
  <div class="app-container new-content">
    <div class="notice">
      <img alt="401" style="width:14px;height:16px" class="pic-error-child left" src="@/assets/wisdom/message.png">
      距离下一核验呈报周期截止时间还有{{authData.day}}天
    </div>
    <el-row :gutter="20" class="panel-group">
      <el-col :span="15" class="card-box">
        <el-card style="height:300px;margin-bottom:27px;" :body-style="{padding: '20px 53px'}">
          <h1 class="ft28 mb18">本期核验概括</h1>
          <span class="ft22">{{authData.startTime}}～{{authData.endTime}}</span>
          <el-row :gutter="20" class="mt56">
            <el-col :span="8">
              <div v-if="level == 1" class="ft22">社区总数</div>
              <div v-if="level == 0 || level == 3" class="ft22">街道总数</div>
              <div class="ft18 mt37"><span class="ft30">{{authData.count}}</span>个</div>
            </el-col>
            <el-col :span="8">
              <div class="ft22">已完成提报</div>
              <div class="ft18 mt37"><span class="ft30 col1">{{authData.reportCount}}</span>个</div>
            </el-col>
            <el-col :span="8">
              <div class="ft22">未提报</div>
              <div class="ft18 mt37"><span class="ft30 col2">{{authData.noReportCount}}</span>个</div>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="height:282px" :body-style="{padding: '20px 43px'}">

          <h1 v-if="level == 1" class="ft28" style="padding-left:10px">社区完成度</h1>
          <h1 v-if="level == 0 || level == 3" class="ft28" style="padding-left:10px">街道完成度</h1>
          <!-- <el-checkbox-group v-model="checkboxGroup1" size="mini" class="mt37" text-color="#4940FD">
            <el-checkbox v-for="item in doData" :key="item.name" :label="item.name" border></el-checkbox>
          </el-checkbox-group> -->
          <div class="mt20">
            <div class="wcd"
              v-bind:class="{ cuban: item.status == 0 || item.status ==1 || item.status ==2, ywc: item.status == 3}"
              v-for="item in doData" :key="item.name">
              {{item.name}}
              <div class="vue-hover-mask_action" @click="handleCuban(item.areaId)"
                v-if="item.status == 0 || item.status ==1 || item.status ==2">
                <i class="iconfont icon-bianji-copy">促办</i>
              </div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="9" class="card-box">
        <el-card style="height:608px" :body-style="{padding: '20px 53px'}">
          <h1 class="ft28 mb27">消息中心</h1>
          <ul class="ft20 message">
            <li @click="dialogMessage(item)" v-for="item in noticeList" :key="item.id">
              {{item.title}}
              <!-- <el-link v-if="item.status == 0" type="danger">未读</el-link>
              <el-link v-if="item.status == 1" type="info">已读</el-link> -->
            </li>
          </ul>
          <div class="pagination-container" style="margin-left:40px">
            <el-pagination layout="prev, pager, next" :page-size="msgData.pageNum" :page-count="msgData.pageTotal"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-card>

      </el-col>
    </el-row>

    <h1 class="mt58 mb25 ft28">人员信息</h1>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">在测核验人员</h1>
          <el-row>
            <el-col :span="10" style="height:353px">
              <img style="width:139px;height:139px;margin-top:70px" class="pic-error-child left"
                src="@/assets/wisdom/manage.png"></el-col>
            <el-col :span="14" style="margin-top:70px">
              <div class="ft23 pdl10">在册核验人员<span class="ftw">{{data1.count}}</span>人</div>
              <div class="ft19 pdl10">较上月相比：<span class="col3">+{{data1.monthAddCount}}</span>人</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">人员占比分布</h1>
          <div class="h413">
            <div id="piechart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">年龄构成</h1>
          <div class="h413">
            <div id="agechart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <h1 class="mt58 mb25 ft28">认证信息</h1>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">认证方式占比</h1>
          <div id="authchart" style="width:100%;height:353px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">认证时间段</h1>
          <div id="timechart" style="width:100%;height:353px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <span class="bd6"></span>
          <h1 style="font-size:22px">已认证人员分布占比</h1>
          <div class="h413">
            <div id="peoplechart" style="width:100%;height:313px;padding-top:90px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="阅读消息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>{{message}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="未读消息" :visible.sync="alertVisible" width="30%" :before-close="handleCloseAlert">
      <ul class="ft20 message" style="height:300px">
        <li @click="dialogMessage(item)" style="font-size:16px" v-for="item in alertList" :key="item.id">
          {{item.title}}
        </li>
      </ul>
      <!-- <div class="pagination-container" style="margin-left:40px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="alertData.pageNum" :total="alertData.pageTotal"  @current-change="handleCurrentChange">
          </el-pagination>
        </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="readMessages()">知道了</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import {
    getCommunityAuthCount,
    getHomeAuthUserVo,
    getHomeMessage,
    getHomeTimeRegionVo,
    getTotalCount,
    getBlockAuthCount,
    getHomeAreaRegionVo,
    getHomeDoingVo,
    getHomeBlockDoingVo,
    readMessage,
    readAllMessage,
    cuban,
    getYiRenZheng
  } from "../../../../api/dashboard";
  export default {
    name: 'Community',
    data() {
      return {
        dialogVisible: false,
        SysSetting: {
          totalreductions: 0,
          totalbills: 0,
          totallargeamounts: 0,
          totalforwardpays: 0
        },
        syskey: '',
        noticeImg: '/src/assets/wisdom/message.png',
        chart: null,
        checkboxGroup1: [],
        data1: {
          "count": 0,
          "monthAddCount": 0,
          "countTotal": 0,
          "authCount": 0,
          "noAuthCount": 0,
          "deathCount": 0,
          "enableCount": 0,
          "startTime": "",
          "endTime": "",
          "day": 0
        },
        notice: {},
        data2: {
          authCount: 0,
          count: 0,
          deathCount: 0,
          enableCount: 0,
          monthAddCount: 0,
          noAuthCount: 0,
        },
        msgData: {
          "pageNum": 1,
          // "status": 0,
          "pageSize": 10,
          "pageTotal": 1
        },
        authData: {
          "count": 0,
          "reportCount": 0,
          "noReportCount": 0,
          "startTime": 0,
          "endTime": 0,
          "day": 0
        },
        noticeList: {},
        pagination: {
          currentPage: 1,
          pagesize: 20,
          pageTotal: 0
        },
        areaData: {
          "name": "",
          "count": 0
        },
        residentData: {
          "numberCount": {
            "number": 0,
            "enableNumber": 0,
            "deathNumber": 0,
            "number80": 0,
            "number8089": 0,
            "number9099": 0,
            "number100": 0,
            "otherPer": ""
          },
          "authTypeCount": {
            "wgCount": 0,
            "myselfCount": 0,
            "otherCount": 0
          },
          "authSiteCount": {
            "authSite": "",
            "count": 0
          }
        },
        doData: {},
        message: '',
        level: '',
        alertData: {
          "pageNum": 1,
          "status": 0,
          "pageSize": 10000,
        },
        alertList: [],
        alertVisible: false
      }
    },
    created() {
      this.InitDictItem()
      this.level = localStorage.getItem('level')


    },
    mounted() {
      this.initCharts();
      this.initAgeCharts();
      this.initPeopleCharts();
      this.initTimeCharts();
      this.initAuthCharts();
    },
    methods: {
      readMessages() {
        let param = []
        this.alertList.forEach((item, index, arr) => {
          param[index] = item.id
        })
        readAllMessage(param).then(res => {
          this.alertVisible = false
        });
      },
      handleCuban(areaId) {
        let that = this
        that.$confirm('是否确认促办?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(function () {
            cuban({
              'url': '/home/all/remind/doing/{areaId}',
              'areaId': areaId
            }).then(res => {
              that.$message.success(res.code == 0 ? '成功' : '失败')
              that.getHomeDoing()
            });
          })
      },
      dialogMessage(row) {
        this.dialogVisible = true
        this.message = row.message

        readMessage({
          'url': '/home/all/read/message/{id}',
          'id': row.id
        }).then(res => {
          this.messageList()
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleCloseAlert(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.alertVisible = false
            done();
          })
          .catch(_ => {});
      },

      /**
       * 选择当页面
       */
      handleCurrentChange(val) {
        this.msgData.pageNum = val
        this.messageList()
      },
      initAgeCharts() {
        getTotalCount().then(res => {

          let myChart = this.$echarts.init(document.getElementById('agechart'))
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 0,
              top: 35,
              bottom: 20,
               textStyle: {
              fontSize: 18
            }
            },
            color: ['#F66A55', '#FEBF5E', '#09B76E', 'blue'],
            series: [{
              name: '居民年龄分布',
              type: 'pie',
              radius: ['60%', '45%'],
              center: ['35%', '30%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [{
                value: res.data.numberCount.number80 ? res.data.numberCount.number80 : 0,
                name: '80岁以下'
              }, {
                value: res.data.numberCount.number8089,
                name: '80-89岁'
              }, {
                value: res.data.numberCount.number9099,
                name: '90-99岁'
              }, {
                value: res.data.numberCount.number100,
                name: '100岁+'
              }, ]
            }]
          })
        });
      },
      // 人员占比
      initPeopleCharts() {
        let myChart = this.$echarts.init(document.getElementById('peoplechart'))
        getYiRenZheng().then(res => {
          var arr = [];
          res.data.forEach(function (value, key) {
            arr.push({
              'name': value.name,
              'value': value.count ? value.count : 0
            })
          })

          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 0,
              top: 0,
              bottom: 20,
              textStyle: {
                fontSize: 18
              }
            },
            color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
              '#8B008B'
            ],
            series: [{
              name: '人员占比分布',
              type: 'pie',
              radius: '60%',
              center: ['30%', '30%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: arr
            }]
          })
        });
      },
      initCharts() {
        let myChart = this.$echarts.init(document.getElementById('piechart'))
        getHomeAreaRegionVo().then(res => {
          var arr = [];
          res.data.forEach(function (value, key) {
            arr.push({
              'name': value.name,
              'value': value.count ? value.count : 0
            })
          })
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 0,
              top: 0,
              bottom: 20,
              textStyle: {
               fontSize: 18
              }
            },
            color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
              '#8B008B'
            ],
            series: [{
              name: '人员占比分布',
              type: 'pie',
              radius: '60%',
              center: ['30%', '30%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: arr
            }]
          })
        });
      },
      initTimeCharts() {

        getHomeTimeRegionVo().then(res => {
          let xData = []
          let yData = []
          res.data.forEach(function (value, key) {
            xData.push(value.authTime)
            yData.push(value.count)
          })

          let myChart = this.$echarts.init(document.getElementById('timechart'))
          myChart.setOption({
            xAxis: {
              type: 'category',
              data: xData
            },
            yAxis: {
              type: 'value'
            },
            color: ['#7F4CFD'],
            series: [{
              data: yData,
              type: 'line',
              smooth: true
            }]
          })
        });

      },
      initAuthCharts() {
        let myColor = ['#5551FE', '#f66a55', '#febf5e']

        getTotalCount().then(res => {
          let myChart = this.$echarts.init(document.getElementById('authchart'))
          var arr = [res.data.authTypeCount.wgCount,
            res.data.authTypeCount.myselfCount,
            res.data.authTypeCount.otherCount
          ];
          myChart.setOption({
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            color: ['#F66A55', '#00C0FF', '#09B76E', '#FEBF5E', '#1869A0', '#FF9393', '#FFB6C1', '#FF1493',
              '#8B008B'
            ],
            legend: {},
            grid: {
              left: 0,
              top: 15,
              right: '30',
              bottom: '0',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              //'time'-时间轴;'log'-对数轴
              splitLine: {
                show: false
              }, //坐标轴在 grid 区域中的分隔线
              axisLabel: {
                show: false
              }, //坐标轴刻度标签
              axisTick: {
                show: false
              }, //坐标轴刻度
              axisLine: {
                show: false
              }, //坐标轴轴线

            },
            yAxis: {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                color: 'rgba(0,0,0,.7)',
                fontSize: 10
              },

              data: ['无感认证人数', '本人认证人数', '他人认证人数']
            },
            series: [{
              name: '', //系列名称
              type: 'bar', //柱状、条形图
              barWidth: 19, //柱条的宽度,默认自适应
              data: arr, //系列中数据内容数组
              label: { //图形上的文本标签
                show: true,
                position: 'right', //标签的位置
                offset: [0, -0], //标签文字的偏移，此处表示向上偏移40
                formatter: '{c}{a}', //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                color: 'rgba(0,0,0,.7)', //标签字体颜色
                fontSize: 20 //标签字号
              },
              itemStyle: { //图形样式
                normal: { //normal 图形在默认状态下的样式;
                  //emphasis图形在高亮状态下的样式
                  barBorderRadius: 10, //柱条圆角半径,单位px.
                  //此处统一设置4个角的圆角大小;
                  //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                  color: function (params) {
                    let num = myColor.length; //得到myColor颜色数组的长度
                    return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
                  },
                }
              },
              zlevel: 1 //柱状图所有图形的 zlevel 值,
            }, ]
          })

        });
      },
      /**
       * 初始化数据
       */
      InitDictItem() {
        let param = this.alertData
        getHomeMessage(param).then(res => {
          if (res.data.total >= 1) {
            this.alertVisible = true
            this.alertList = res.data.list
            this.alertData.pageTotal = res.data.pages || 1;
          }
        });
        //获取居民列表
        getCommunityAuthCount().then(res => {
          this.data1 = res.data
        });

        getBlockAuthCount().then(res => {
          this.authData = res.data
        });

        //获取居民列表
        getHomeAuthUserVo().then(res => {

        });

        this.getHomeDoing()
        this.messageList()

      },
      messageList() {
        //获取居民列表
        let param = this.msgData
        getHomeMessage(param).then(res => {
          this.noticeList = res.data.list
          this.msgData.pageTotal = res.data.pages || 1;
        });

      },
      getHomeDoing() {
        //0-民政 1-街道 2-社区

        if (localStorage.getItem('level') == 1) {

          getHomeDoingVo().then(res => {
            this.doData = res.data
          });
        } else {

          getHomeBlockDoingVo().then(res => {
            this.doData = res.data
          });
        }

      },
      toPage(pageUrl) {
        // 直接跳转
        this.$router.push('/' + pageUrl)
      },
      loadsysType() {
        var data = {
          openmf: this.syskey,
          appId: defaultSettings.appId,
          systemCode: defaultSettings.activeSystemCode
        }
        this.loading = true
        this.$store
          .dispatch('user/sysConnetLogin', data)
          .then(res => {
            // window.location.href = res.data.ActiveSystemUrl
            this.loading = false
          })
          .catch(res => {
            this.loading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mt58 {
    margin-top: 58px;
  }

  .mb25 {
    margin-bottom: 25px;
  }

  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }

  .systeminfo {
    line-height: 25px;
    float: left;
    width: 50%;
    margin-bottom: 20px;

    .lidiv {
      line-height: 25px;
    }
  }

  .notice {
    height: 30px;
    line-height: 30px;
    padding-left: 26px;
    position: relative;
    color: #4940FD;
    font-size: 16px;

    img {
      position: absolute;
      left: 0;
      top: 7px;
    }
  }

  .el-card {
    border-radius: 30px;
    box-shadow: none;
    border: 0;


  }

  .ft22 {
    font-size: 22px;
    color: #999999;
  }

  .ft23 {
    font-size: 20px;
    color: #333333;
  }

  .ft28 {
    font-size: 28px;
    color: #333333;
    font-weight: 600;
  }

  .ft18 {
    font-size: 18px;
    color: #999999;
  }

  .ft19 {
    font-size: 18px;
    color: #333333;
    margin-top: 22px;
  }

  .mb18 {
    margin-bottom: 18px;
  }

  .mt37 {
    margin-top: 25px;
  }

  .mt56 {
    margin-top: 28px;
  }

  .mb27 {
    margin-bottom: 27px;
  }

  .ft30 {
    font-size: 30px;
    color: #333333;
    font-weight: 800;
    padding-right: 6px;
  }

  .col1 {
    color: #1BB358;
  }

  .col2 {
    color: #EB7429;
  }

  .col3 {
    color: #FEBF5E;
  }

  .ftw {
    font-weight: bold;
    font-size: 26px;
  }

  .pdl10 {
    padding-left: 10px;
  }

  .h413 {
    height: 353px;
  }

  .el-card .el-checkbox {
    margin-left: 10px;
    height: 35px;
    line-height: 35px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    margin-bottom: 16px;
  }


  .el-checkbox.is-bordered.el-checkbox--mini {
    padding: 0px 10px 0px 10px;
  }

  .ft20 {
    font-size: 20px;
    color: #666666;
    list-style: none;
  }

  .message {
    display: block;
    height: 470px;
    overflow: auto;
  }

  .message li {
    cursor: pointer;
    margin-bottom: 16px;
  }

  .wcd {
    float: left;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 6px 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .mt20 {
    margin-top: 20px;
  }

  .ywc {
    border: 1px solid #4940FD;
    color: #4940FD;
    background: url('../../../../assets/wisdom/ywc.png') right bottom no-repeat;
    background-size: 15px;
  }

  .cuban {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

  .vue-hover-mask_action {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 14px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s;
  }

  .vue-hover-mask_action::after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
  }

  .vue-hover-mask_action:hover {
    opacity: 1;
  }

  .bd6 {
    display: block;
    width: 6px;
    height: 22px;
    float: left;
    background-color: #4940FD;
    margin-top: 5px;
    margin-right: 6px;
  }
</style>